import React, {Component} from 'react';
import { connect } from "react-redux";
import {Tabs, Button, message} from "antd";
import {deepFullCopy, messages} from "share/common";
import Condition from "components/condition";
import BlackWhiteBasicInfo from "./basic-info";
import BlackWhiteInvoiceTypeRule from "./invoice-type-rule";
import BlackWhiteTaxCodeRule from "./tax-code-rule";
import taxCodeService from "../../tax-code.service"
import "styles/finance-setting/tax-code/black-white-list.scss";

const TabPane = Tabs.TabPane;
const { If } = Condition;

@connect(mapStateToProps)
class BlackWhiteDetail extends Component {

  state = {
    loading: false,
    tabKey: 'basic-info',
    info: deepFullCopy(this.props.record)
  };

  handleSave = () => {
    this.basicInfoRef.props.form.validateFieldsAndScroll((err, values) => {
      if (err) {
        this.setState({ tabKey: 'basic-info' });
      } else {
        console.log(values)
        let { info } = this.state;
        let saveParams = {
          levelCode: 'TENANT',
          levelOrgId: this.props.tenant.id,
          listType: this.props.listType,
          enabled: values.enabled,
          listCode: values.listCode,
          listNameI18n: values.listNameI18n.i18n,
          listDescI18n: values.listDescI18n.i18n
        };
        info.expReceiptMappingListId && (saveParams.expReceiptMappingListId = info.expReceiptMappingListId);
        this.setState({ loading: true });
        taxCodeService.updateWhiteBlackDetail(saveParams)
          .then(res => {
            message.success(messages('common.save.success', {arg1: ""})/*{arg1} 保存成功*/);
            if (!info.expReceiptMappingListId) { // 新建
              info.expReceiptMappingListId = res.data.expReceiptMappingListId;
              this.setState({ info, tabKey: 'invoice-type-rule' })
            } else { // 编辑
              this.props.close(true);
            }
          })
          .finally(() => {
            this.setState({ loading: false });
          })
      }
    })
  };

  handleBack = () => {
    // 保存黑白名单的基本信息后再点击返回按钮，也需要刷新列表数据
    const needRefresh = !this.props.record.expReceiptMappingListId && this.state.info.expReceiptMappingListId;
    this.props.close(!!needRefresh);
  };

  renderTabs = () => {
    let tabs = [{
      key: 'basic-info',
      name: messages('expense-14.key531')/*1.基本信息*/
    }, {
      key: 'invoice-type-rule',
      name: messages('expense-14.key532')/*2.设置发票类型规则*/,
      disabled: !this.state.info.expReceiptMappingListId
    }, {
      key: 'tax-code-rule',
      name: messages('expense-14.key533')/*3.设置税务编码规则*/,
      disabled: !this.state.info.expReceiptMappingListId
    }];
    return (
      tabs.map(tab => (
        <TabPane tab={tab.name} key={tab.key} disabled={tab.disabled}/>))
    );
  };

  render() {
    const { authPolicyAll } = this.props;
    const { loading, tabKey, info } = this.state;
    return (
      <div className="black-white-detail">
        <Tabs activeKey={tabKey} onChange={tabKey => this.setState({ tabKey })}>
          {this.renderTabs()}
        </Tabs>
        <div className="black-white-detail-content">
          <div style={{ overflow: 'hidden', height: tabKey === 'basic-info' ? 'auto' : 0 }}>
            <BlackWhiteBasicInfo
              wrappedComponentRef={inst => this.basicInfoRef = inst}
              record={info}
              disabled={!authPolicyAll}
            />
          </div>
          <If value={tabKey === 'invoice-type-rule'}>
            <BlackWhiteInvoiceTypeRule ruleId={info.expReceiptMappingListId}/>
          </If>
          <If value={tabKey === 'tax-code-rule'}>
            <BlackWhiteTaxCodeRule ruleId={info.expReceiptMappingListId}/>
          </If>
        </div>
        <div className="slide-footer">
          <If value={authPolicyAll}>
            <Button type="primary" loading={loading} onClick={this.handleSave}>{messages('expense-14.key388')/*确认*/}</Button>
          </If>
          <Button onClick={this.handleBack}>{messages('common.back')/*返回*/}</Button>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    tenant: state.login.tenant,
    authPolicyAll: state.main.authPolicyAll
  }
}

export default BlackWhiteDetail;
